<!DOCTYPE html>
<!--
QQ:1067623902
2018/05/25
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连接</title>
</head>
<script src="js/guacamole/all.min.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>

<body>
<a href="play.html">播放录像</a>

<h3>
    录像默认保存路径：/usr/share/nginx/html/demo/media/+ yyyy-MM-dd
    <br>
    如果没有 /usr/share/nginx/html/demo/media/ 录像将不会保存
    <br>
    如需更改请更改java 第87行</h3>
连接类型：<select name="" id="protocol">
    <option>ssh</option>
    <option>vnc</option>
    <option>rdp</option>
    <option>telnet</option>
</select>
<br>
<br>
连接主机地址：<input type="text" value="192.168.1.199" id="hostname">
<br>
<br>
连接主机端口：<input type="text" value="22" id="port">
<br>
<br>
连接主机登入账号：<input type="text" value="root" id="username">
<br>
<br>
连接主机登入密码：<input type="text" value="1qaz2wsx" id="password">
<br>
<br>
录像文件名称：<input type="text" placeholder="禁止填写中文" id="r_name">
<br>
<br>
文本记录文件名称：<input type="text" placeholder="禁止填写中文" id="t_name">
<br>
<br>
RDP连接的安全模式：<select name="" id="g_security">
    <option>rdp</option><!--标准RDP加密。这是默认设置，应该由所有RDP服务器支持。-->
    <option>nla</option><!--网络级别认证。此模式需要用户名和密码，并在远程桌面会话实际开始之前执行验证步骤。如果没有给出用户名和密码，则无法建立连接。-->
    <option>tls</option><!--TLS加密。TLS（传输层安全性）是SSL的后继者。-->
    <option>any</option><!--允许服务器选择安全类型。-->
</select>
<br>
<br>
字体：<input type="text" placeholder="SimHei（黑体）可以不填" id="font_name">
<br>
<br>
<button onclick="client()">连接</button>
<!-- Display -->
<div id="display"></div>
<!-- Init -->
<script type="text/javascript">

    function client() {
        var protocol=$('#protocol').val();
        var hostname=$('#hostname').val();
//        console.log(protocol);
//        return false;
        var ports=$('#port').val();
        var username=$('#username').val();
        var password=$('#password').val();
        var r_name=$('#r_name').val();
        var t_name=$('#t_name').val();
        var g_security=$('#g_security').val();
        var font_name=$('#font_name').val();

        // Get display div from document
        var display = document.getElementById("display");

        // Instantiate client, using an HTTP tunnel for communications.
        //gua java项目 localhost:8080/gua/tunnel
        var guac = new Guacamole.Client(
            new Guacamole.HTTPTunnel("http://192.168.1.112:8080/gua/tunnel",true)
        );

        // Add client to display div
        display.appendChild(guac.getDisplay().getElement());

        // Error handler
        guac.onerror = function (error) {
            alert("请正确配置连接地址、用户名、密码；如有疑问：请联系管理员")
        };

        // Connect
        var form = new FormData();
        form.append("protocol", protocol);
        form.append("hostname", hostname);
        form.append("port", ports);
        form.append("username", username);
        form.append("password", password);
        form.append("recording-name", r_name);
        form.append("typescript-name",t_name);
        form.append("security", g_security);
        form.append("font-name", font_name);
        guac.connect(form);


        // Disconnect on close
        window.onunload = function() {
            guac.disconnect();
        };
        // Mouse
        var mouse = new Guacamole.Mouse(guac.getDisplay().getElement());

        mouse.onmousedown =
            mouse.onmouseup   =
                mouse.onmousemove = function(mouseState) {
                    guac.sendMouseState(mouseState);
                };

        // Keyboard
        var keyboard = new Guacamole.Keyboard(document);

        keyboard.onkeydown = function (keysym) {
            guac.sendKeyEvent(1, keysym);
        };

        keyboard.onkeyup = function (keysym) {
            guac.sendKeyEvent(0, keysym);
        };
    }
</script>
</body>
</html>